<template>
  <j-modal
    centered
    title="部门人员选择"
    :width="720"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    @cancel="close"
    cancelText="关闭">
    <a-row :gutter="18">
      <a-col :span="12" class="content">
        <a-input v-model="params.keyword" placeholder="搜索" allow-clear >
          <a-icon slot="prefix" type="search" />
        </a-input>
        <div class="container" v-if="!params.keyword">
          <div class="nav" v-if="checkbox.navList && checkbox.navList.length">
            <template v-for="(navItem, navIndex) in checkbox.navList">
              <a-icon type="right" v-if="navIndex != 0" />
              <span @click="handlenavList(navItem, navIndex)">{{ navItem.name }}</span>
            </template>
          </div>
          <div class="container-checkbox">
            <a-icon type="loading" v-if="dataObj.loading" />
            <template v-if="!dataObj.isEmpty">
              <a-checkbox :indeterminate="checkbox.indeterminate" :checked="checkbox.checkAll" :disabled="checkedOnlyAllUserDisabled" @change="onCheckAllChange">全选</a-checkbox>
              <a-checkbox-group v-model="checkbox.checkedList" @change="onChange">
                <div class="checkbox-item" v-for="(item, index) in dataObj.dataSource" :key="index">
                  <!-- izDept 0为联系人 1为部门 -->
                  <a-checkbox :value="item.code" @change="singleChange($event, item)" :disabled="checkedOnlyUserDisabled(item)">
                    <img src="@/assets/images/dept_logo.png" v-if="item.izDept === '1'">
                    <template v-else-if="item.izDept === '0'">
                      <img :src="item.avatar" v-if="item.avatar">
                      <span class="logo" v-else>{{ splitUserNameFunction(item.name) }}</span>
                    </template>
                    <span class="text" :title="item.name">{{ item.name }}</span>
                  </a-checkbox>
                  <span class="subordinate" @click.stop="handleSubordinate(item)" v-if="item.izDept === '1'">下级</span>
                </div>
              </a-checkbox-group>
            </template>
            <a-empty description="暂无数据" v-else style="margin-top: 24px;" />
          </div>
        </div>
        <div class="search-container" v-else>
          <div class="header">
            <span @click="handleChangeType(index)" :class="{active: params.type == index}" v-for="(item, index) in serachDataObj.titleList" :key="index">{{ item }}</span>
          </div>
          <a-checkbox-group v-model="checkbox.checkedList" @change="onChange" id="ant-checkbox-group">
            <!-- 全部 -->
            <template v-if="params.type == 0">
              <div class="search-content">
                <div class="title">联系人</div>
                <div class="loading" v-if="dataObj.loading">
                  <a-icon type="loading" />
                </div>
                <div class="search-content_" v-if="!serachDataObj.isEmptyContacts">
                  <div class="checkbox-item" v-for="(item, index) in serachDataObj.contactsDataSource" :key="index">
                    <a-checkbox :value="item.code" @change="singleChange($event, item, 'search')">
                      <img :src="item.avatar" v-if="item.avatar">
                      <span class="logo" v-else>{{ splitUserNameFunction(item.name) }}</span>
                      <span class="text" :title="item.name">{{ item.name }}</span>
                    </a-checkbox>
                  </div>
                </div>
                <a-empty class="empty-mini" description="暂无数据" v-else />
                <div class="more" @click="handleChangeType(1)">
                  <a-icon slot="prefix" type="search" />
                  <span>查看更多相关联系人</span>
                  <a-icon type="right" />
                </div>
              </div>
              <div class="search-content">
                <div class="title">部门</div>
                <div class="loading" v-if="dataObj.loading">
                  <a-icon type="loading" />
                </div>
                <div class="search-content_" v-if="!serachDataObj.isEmptyDept">
                  <div class="checkbox-item" v-for="(item, index) in serachDataObj.deptDataSource" :key="index">
                    <a-checkbox :value="item.code" @change="singleChange($event, item, 'search')" :disabled="checkedOnlyUser">
                      <img src="@/assets/images/dept_logo.png">
                      <span class="text" :title="item.name">{{ item.name }}</span>
                    </a-checkbox>
                  </div>
                </div>
                <a-empty class="empty-mini" description="暂无数据" v-else />
                <div class="more" @click="handleChangeType(2)">
                  <a-icon slot="prefix" type="search" />
                  <span>查看更多相关部门</span>
                  <a-icon type="right" />
                </div>
                <div class="search-result">已展示全部结果</div>
              </div>
            </template>
            <!-- 联系人 -->
            <template v-if="params.type == 1">
              <div class="search-content">
                <div class="loading" v-if="dataObj.loading">
                  <a-icon type="loading" />
                </div>
                <div class="search-content_" v-if="!serachDataObj.isEmptyContacts">
                  <div class="checkbox-item" v-for="(item, index) in serachDataObj.contactsDataSource" :key="index">
                    <a-checkbox :value="item.code" @change="singleChange($event, item)">
                      <img :src="item.avatar" v-if="item.avatar">
                      <span class="logo" v-else>{{ splitUserNameFunction(item.name) }}</span>
                      <span class="text" :title="item.name">{{ item.name }}</span>
                    </a-checkbox>
                  </div>
                </div>
                <a-empty description="暂无数据" v-else style="margin-top: 24px" />
                <div class="search-result" v-if="serachDataObj.scrollEvent">已展示全部结果</div>
              </div>
            </template>
            <!-- 部门 -->
            <template v-if="params.type == 2">
              <div class="search-content">
                <div class="loading" v-if="dataObj.loading">
                  <a-icon type="loading" />
                </div>
                <div class="search-content_" v-if="!serachDataObj.isEmptyDept">
                  <div class="checkbox-item" v-for="(item, index) in serachDataObj.deptDataSource" :key="index">
                    <a-checkbox :value="item.code" @change="singleChange($event, item)" :disabled="checkedOnlyUser">
                      <img src="@/assets/images/dept_logo.png">
                      <span class="text" :title="item.name">{{ item.name }}</span>
                    </a-checkbox>
                  </div>
                </div>
                <a-empty description="暂无数据" v-else style="margin-top: 24px" />
                <div class="search-result" v-if="serachDataObj.scrollEvent">已展示全部结果</div>
              </div>
            </template>
          </a-checkbox-group>
        </div>
      </a-col>
      <a-col :span="12">
        <div class="select-content" v-if="dataObj.selectDataSource && dataObj.selectDataSource.length">
          <div class="title">已选择（{{ dataObj.selectDataSource.length }}）</div>
          <div class="select-container">
            <div class="select-item" v-for="(selectItem, selectIndex) in dataObj.selectDataSource" :key="selectIndex">
              <img src="@/assets/images/dept_logo.png" v-if="selectItem.izDept === '1'">
              <template v-else-if="selectItem.izDept === '0'">
                <img :src="selectItem.avatar" v-if="selectItem.avatar">
                <span class="logo" v-else>{{ splitUserNameFunction(selectItem.name) }}</span>
              </template>
              <span class="text" :title="selectItem.name">{{ selectItem.name }}</span>
              <a-icon type="close-circle" theme="filled" @click="handelDel(selectItem)" />
            </div>
          </div>
        </div>
        <a-empty description="暂无数据" v-else />
      </a-col>
    </a-row>
  </j-modal>
</template>

<script>
  import { getAction } from '@/api/manage';
  import { simpleDebounce, splitUserNameFunction } from '@/utils/util.js';

  export default {
    name: 'JSelectUserDeptComponentModal',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      value: {
        type: Array,
        default: () => []
      },
      checkedOnlyUser:{    //是否只允许选择用户
        type:Boolean,
        default:false
      },
      orgCode:{
        type:String
      }
    },
    data() {
      return {
        params: {
          type: 0,
          keyword: ''
        },
        checkbox: {
          indeterminate: true,
          checkAll: false,
          checkedList: [],
          navList: []
        },
        url: {
          queryDeptAndUser: "/sys/sysDepart/queryDeptAndUser",
          transDeptAndUser: "/sys/sysDepart/transDeptAndUser"
        },
        dataObj: {
          dataSource: [],
          loading: false,
          selectDataSource: [],
          isEmpty: false
        },
        serachDataObj: {
          contactsDataSource: [],
          deptDataSource: [],
          titleList: ['全部', '联系人', '部门'],
          scrollEvent: false,
          hasScrollEvent: false,
          isEmptyContacts: false,
          isEmptyDept: false,
        },
      }
    },
    computed:{
      //全选控制
      checkedOnlyAllUserDisabled(){
        if(this.checkedOnlyUser){
          return this.dataObj.dataSource.some(s=>s.izDept === '1')
        }else{
          return false
        }
      },
    },
    watch: {
      'params.keyword': {
        handler(val){
          if(val){
            // 将tab置为全部
            this.params.type = 0;
            this.handleSearch();
          }else{
            this.serachDataObj.contactsDataSource = [];
            this.serachDataObj.deptDataSource = [];
            // 清除分页信息
            delete this.params.pageNo;
            delete this.params.pageSize;
          }
        }
      },
      value: {
        immediate: true,
        handler(val){
          // 初始化右侧数据赋值
          if(val && val.length){
            this.transDeptAndUser(val.join(','));
          }else{
            this.dataObj.selectDataSource = [];
          }
        }
      }
    },
    created(){
      this.init();
    },

    methods: {
      splitUserNameFunction,
      async init(){
        // 初始化默认全部
        this.checkbox.navList = [
          {
            name: '所有部门',
            code: this.orgCode ? this.orgCode : ''
          }
        ];
        this.params = {
          type: 0,
          keyword: '',
          code:this.orgCode
        }
        await this.queryDeptAndUser(this.params);
        // 左侧选中值赋值
        this.handleCheckedList();
      },
      //只选择用户
      checkedOnlyUserDisabled(item){
        if(this.checkedOnlyUser){
         return item.izDept === '1' ? true : false
        }else{
          return false
        }
      },
      queryDeptAndUser( params, type ){
        // 初始化数据
        if(type === 'search'){
          this.serachDataObj.contactsDataSource = [];
          this.serachDataObj.deptDataSource = [];
          this.serachDataObj.isEmptyContacts = false;
          this.serachDataObj.isEmptyDept = false;
        }else if(type != 'scroll'){
          this.dataObj.dataSource = [];
          this.dataObj.isEmpty = false;
        }
        this.dataObj.loading = true;
        return new Promise((resolve, reject) => {
          getAction(this.url.queryDeptAndUser, params).then((res) => {
            if(res.success){
              if(type === 'search'){
                //搜索赋值
                let records = (res.result && res.result.records) || [];
                let contactsDataSource = records.filter(item => item.izDept === '0');
                let deptDataSource = records.filter(item => item.izDept === '1');
                this.serachDataObj.isEmptyContacts = !(contactsDataSource && contactsDataSource.length);
                this.serachDataObj.isEmptyDept = !(deptDataSource && deptDataSource.length);
                resolve(res.result);
              }else if(type === 'scroll'){
                resolve(res.result);
              }else{
                this.dataObj.dataSource = (res.result && res.result.records) || [];
                this.dataObj.isEmpty = !(this.dataObj.dataSource && this.dataObj.dataSource.length);
                resolve();
              }
            }else{
              this.$message.warning(res.message);
            }
          }).finally(() => {
            this.dataObj.loading = false;
          })
        })
      },
      transDeptAndUser(params){
        getAction('/sys/sysDepart/transDeptAndUser', { transValue: params }).then((res) => {
          if(res.success){
            this.dataObj.selectDataSource = res.result || [];
            // 左侧选中
            this.handleCheckedList();
            this.$emit('handleOptions', this.dataObj.selectDataSource);
          }else{
            this.$message.warning(res.message);
          }
        })
      },
      onCheckAllChange(e) {
        let plainOptions = this.dataObj.dataSource.map(item => item.code);
        Object.assign(this.checkbox, {
          checkedList: e.target.checked ? plainOptions : [],
          indeterminate: false,
          checkAll: e.target.checked,
        });
        // 处理右侧选中
        // 右侧数据去除左侧数据
        let selectDataSource = this.dataObj.selectDataSource.filter(item => plainOptions.indexOf(item.code) === -1);
        if(e.target.checked){
          // 选中，添加左侧数据
          this.dataObj.selectDataSource = [...selectDataSource, ...this.dataObj.dataSource];
        }else{
          // 未选中，直接赋值
          this.dataObj.selectDataSource = selectDataSource;
        }
      },
      onChange(checkedList) {
        let plainOptions = this.dataObj.dataSource.map(item => item.code);
        let checkedList_ = checkedList.filter(item => plainOptions.indexOf(item) > -1);
        this.checkbox.indeterminate = !!checkedList_.length && checkedList_.length < plainOptions.length;
        this.checkbox.checkAll = checkedList_.length === plainOptions.length;
      },
      singleChange(e, item, type){
        //处理右侧选中
        if(e.target.checked){
          this.dataObj.selectDataSource.push(item);
          //搜索状态下，选中后清空(type不为0，需要传keyword)
          if(this.params.keyword){
            this.params.keyword = '';
            this.params.type = 0;
          }
        }else{
          this.dataObj.selectDataSource = this.dataObj.selectDataSource.filter(selectItem => selectItem.code != e.target.value);
        }
      },
      // 右侧删除按钮
      handelDel(selectItem){
        //右侧数据剔除该数据
        this.dataObj.selectDataSource = this.dataObj.selectDataSource.filter(item => item.code != selectItem.code);
        // 左侧选中值赋值
        this.handleCheckedList();
      },
      // 点击下级
      async handleSubordinate(item){
        //储存navList
        this.checkbox.navList.push(item);
        this.params.code = item.code;
        await this.queryDeptAndUser(this.params);
        // 左侧选中值赋值
        this.handleCheckedList();
      },
      async handlenavList(item, index){
        // 处理navList
        this.checkbox.navList = this.checkbox.navList.slice(0, index + 1);
        this.params.code = item.code;
        await this.queryDeptAndUser(this.params);
        // 左侧选中值赋值
        this.handleCheckedList();
      },
      handleCheckedList(){
        let plainOptions = this.dataObj.dataSource.map(item => item.code);
        //搜索状态下
        if(this.params.keyword){
          plainOptions = [...this.serachDataObj.contactsDataSource, ...this.serachDataObj.deptDataSource];
          plainOptions = plainOptions.map(item => item.code);
        }
        let selectDataSource = this.dataObj.selectDataSource.map(item => item.code);
        this.checkbox.checkedList = selectDataSource.filter(item => plainOptions.indexOf(item) > -1);
        this.onChange(this.checkbox.checkedList);
      },
      // 处理搜索
      handleSearch: simpleDebounce(async function() {
        let result = await this.queryDeptAndUser(this.params, 'search');
        let records = result.records || [];
        this.serachDataObj.contactsDataSource = records.filter(item => item.izDept === '0');
        this.serachDataObj.deptDataSource = records.filter(item => item.izDept === '1');
        // 左侧选中值赋值
        this.handleCheckedList();
      }, 100),
      async handleChangeType(index){
        // 搜索中切换tab
        this.params.type = index;
        if(index != 0){
          this.params.pageNo = 1;
          this.params.pageSize = 20;
          this.serachDataObj.scrollEvent = false;
        }else{
          delete this.params.pageNo;
          delete this.params.pageSize;
        }
        let result = await this.queryDeptAndUser(this.params, 'search');
        let records = result.records || [];
        // izDept 0为联系人，1为部门
        this.serachDataObj.contactsDataSource = records.filter(item => item.izDept === '0');
        this.serachDataObj.deptDataSource = records.filter(item => item.izDept === '1');
        // 左侧选中值赋值
        this.handleCheckedList();
        this.$nextTick(() => {
          if(this.params.type == 0) return;
          // 获取元素
          const slider = document.getElementById('ant-checkbox-group');
          if(this.serachDataObj.hasScrollEvent){
            slider.removeEventListener('wheel', () => {});
            this.serachDataObj.hasScrollEvent = false;
          }
          // 绑定滑动事件监听器
          slider.addEventListener('wheel', async () => {
            if(this.params.type == 0) return;
            // wheel事件添加标识
            this.serachDataObj.hasScrollEvent = true;
            //数据请求完，禁止
            if(this.serachDataObj.scrollEvent) return;
            const { scrollTop, scrollHeight, clientHeight } = slider;
            if (scrollTop + clientHeight >= scrollHeight - 10) {
              if(this.params.type == 0) return;
              //防止一次请求太多
              this.serachDataObj.scrollEvent = true;
              // console.log('滑动到了底部');
              // 滑动到底部时的处理逻辑
              this.params.pageNo++;
              let result = await this.queryDeptAndUser(this.params, 'scroll');
              let records = result.records || [];
              // izDept 0为联系人，1为部门
              let contactsDataSource = records.filter(item => item.izDept === '0');
              this.serachDataObj.contactsDataSource = [...this.serachDataObj.contactsDataSource, ...contactsDataSource];
              let deptDataSource = records.filter(item => item.izDept === '1');
              this.serachDataObj.deptDataSource = [...this.serachDataObj.deptDataSource, ...deptDataSource];
              if(this.params.type == 1){
                // 数据请求完成标识
                this.serachDataObj.scrollEvent = this.serachDataObj.contactsDataSource.length === result.total || records.length < this.params.pageSize;
              }
              if(this.params.type == 2){
                // 数据请求完成标识
                this.serachDataObj.scrollEvent = this.serachDataObj.deptDataSource.length === result.total || records.length < this.params.pageSize;
              }
            }
          });
        })
      },
      /** 关闭弹窗 */
      close() {
        this.$emit('update:visible', false)
      },
      /** 完成选择 */
      handleOk() {
        let selectDataSource = this.dataObj.selectDataSource.map(item => {
          // 部门
          if(item.izDept === '1'){
            return `D_${item.code}`
          }
          // 联系人
          if(item.izDept === '0'){
            return `U_${item.code}`
          }
        })
        this.$emit('changeSelectDataSource', selectDataSource);
        this.close();
      },
    }
  }
</script>
<style lang="less" scoped>
  .content{
    position: relative;
    &::after{
      content: '';
      display: block;
      width: 1px;
      height: calc(100% + 48px);
      background-color: hsla(210,7%,53%,.16);
      position: absolute;
      right: 0;
      top: -24px;
    }
    .ant-input-prefix i{
      font-size: 16px;
      color: rgba(23,26,29,.4);
    }
    .container{
      margin-top: 10px;
      .nav{
        font-size: 14px;
        color: rgba(23, 26, 29, .6);
        margin: 8px 0;
        span{
          cursor: pointer;
        }
        i{
          font-size: 14px;
          color: rgba(23, 26, 29, .6);;
        }
        span:last-child{
          color: #171a1d;
        }
      }
      .container-checkbox::-webkit-scrollbar{
        width: 0;
      }
      .container-checkbox{
        height: 415px;
        overflow-y: auto;
        margin: 0 -4px 0 -8px;
        position: relative;
        .anticon-loading{
          color: #317ed0;
          font-size: 20px;
          position: absolute;
          top: 20px;
          left: calc(50% - 10px);
        }
        &>.ant-checkbox-wrapper{
          line-height: 36px;
        }
        .ant-checkbox-wrapper{
          display: block;
          font-size: 14px;
        }
        .ant-checkbox-wrapper + .ant-checkbox-wrapper{
          margin-left: 0;
        }
        &>.ant-checkbox-wrapper, .checkbox-item{
          padding: 0 8px;
        }
        &>.ant-checkbox-wrapper:hover, .checkbox-item:hover{
          border-radius: 8px;
          background-color: hsla(210, 7%, 53%, .12);
        }
        .ant-checkbox-group{
          width: 100%;
          .checkbox-item{
            height: 48px;
            line-height: 44px;
            font-size: 12px;
            .ant-checkbox-wrapper{
              width: 85%;
              float: left;
              height: 48px;
              img{
                width: 36px;
                height: 36px;
                border-radius: 6px;
                object-fit: cover;
              }
              span.logo{
                width: 36px;
                height: 36px;
                line-height: 36px;
                border-radius: 6px;
                background-color: #1890FF;
                color: #fff;
                display: inline-block;
                text-align: center;
                margin-top: 6px;
              }
              span.text{
                margin-left: 10px;
                color: #171a1d;
                width: 180px;
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                vertical-align: middle;
              }
            }
            .subordinate{
              color: #317ed0;
              float: right;
              border-left: 1px solid hsla(210, 7%, 53%, .16);
              padding-left: 12px;
              line-height: 16px;
              margin-top: 16px;
              cursor: pointer;
            }
          }
        }
      }
    }
    .search-container{
      border-radius: 4px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
      margin-top: 4px;
      .header{
        height: 34px;
        line-height: 34px;
        border-bottom: 1px solid hsla(210,7%,53%,.16);
        display: flex;
        color: rgba(23,26,29,.6);
        font-size: 12px;
        span{
          width: 90px;
          padding: 0 12px;
          cursor: pointer;
        }
        span.active{
          color: #171a1d;
        }
      }
      .ant-checkbox-group{
        width: 100%;
        height: 420px;
        overflow-y: auto;
      }
      .ant-checkbox-group::-webkit-scrollbar{
        width: 0;
      }
      .search-content{
        padding: 8px;
        font-size: 14px;
        min-height: 50px;
        .loading{
          height: 50px;
          position: relative;
          .anticon-loading{
            color: #317ed0;
            font-size: 20px;
            position: absolute;
            top: 20px;
            left: calc(50% - 10px);
          }
        }
        .title{
          margin: 10px 16px 0 12px;
          height: 26px;
          line-height: 26px;
          color: #171a1d;
          &::after{
            border-bottom: 1px solid hsla(210, 7%, 53%, .16);
            content: "";
            display: block;
            width: calc(100% + 12px);
          }
        }
        .search-content_{
          .checkbox-item:hover{
            border-radius: 8px;
            background-color: hsla(210, 7%, 53%, .12);
          }
          .checkbox-item{
            height: 48px;
            line-height: 44px;
            font-size: 12px;
            padding: 0 12px;
            .ant-checkbox-wrapper{
              width: 85%;
              float: left;
              height: 48px;
              img{
                width: 36px;
                height: 36px;
                border-radius: 6px;
                object-fit: cover;
              }
              span.logo{
                width: 36px;
                height: 36px;
                line-height: 36px;
                border-radius: 6px;
                background-color: #1890FF;
                color: #fff;
                display: inline-block;
                text-align: center;
                margin-top: 6px;
              }
              span.text{
                margin-left: 10px;
                color: #171a1d;
                width: 160px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: inline-block;
                vertical-align: middle;
              }
            }
          }
        }
        .more:hover{
          border-radius: 8px;
          background-color: hsla(210, 7%, 53%, .12);
        }
        .more{
          padding: 0 12px;
          height: 36px;
          line-height: 36px;
          cursor: pointer;
          &::after{
            border-bottom: 1px solid hsla(210, 7%, 53%, .16);
            content: "";
            display: block;
            width: calc(100% + 12px);
          }
          .anticon-search{
            font-size: 16px;
            margin-right: 10px;
            color: #317ed0;
          }
          .anticon-right{
            font-size: 12px;
            float: right;
            margin-top: 12px;
            color: rgba(23, 26, 29, 0.4);
          }
          span{
            font-size: 13px;
            color: #317ed0;
          }
        }
        .search-result{
          height: 80px;
          line-height: 80px;
          text-align: center;
          color: rgba(23, 26, 29, 0.24);
          font-size: 12px;
        }
      }
    }
  }
  .select-content{
    color: #171a1d;
    font-size: 14px;
    .select-container{
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      max-height: 500px;
      overflow-y: auto;
    }
    .select-container::-webkit-scrollbar{
      width: 0;
    }
    .select-item{
      border-radius: 6px;
      cursor: pointer;
      height: 32px;
      line-height: 28px;
      margin: 4px;
      padding: 0 4px;
      background-color: rgba(23, 26, 29, .03);
      font-size: 12px;
      img{
        width: 24px;
        height: 24px;
        object-fit: cover;
        border-radius: 4px;
      }
      span.logo{
        width: 24px;
        height: 24px;
        line-height: 24px;
        border-radius: 4px;
        background-color: #1890FF;
        color: #fff;
        display: inline-block;
        text-align: center;
        font-size: 0.5rem;
        vertical-align: middle;
      }
      span.text{
        margin-left: 4px;
        max-width: 90px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
      }
      i{
        color: #bbb;
        margin-left: 12px;
        vertical-align: middle;
      }
    }
  }
  /deep/.ant-checkbox-inner::after{
    left: 20%;
  }
  /deep/.ant-checkbox-indeterminate .ant-checkbox-inner::after{
    background-color: transparent;
  }
  /deep/.ant-checkbox-inner{
    width: 16px;
    height: 16px;
    border: 2px solid hsla(210, 7%, 53%, .24);
    border-radius: 4px;
  }
  .search-content /deep/.ant-empty.empty-mini {
    font-size: 0.7rem;
    margin-top: 14px;
    .ant-empty-image{
      height: 60px;
      margin-bottom: 2px;
    }
  }
</style>